<script setup lang="ts">
const listList = [
  "https://img2.baidu.com/it/u=608390057,3839443469&fm=253&fmt=auto&app=138&f=JPEG",
  "https://img.idol001.com/middle/2018/07/29/abb019c470d8f0e88ef320c6abdfd7d71532856770.jpg",
  "https://img2.baidu.com/it/u=836226432,1813591053&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
  "https://img1.baidu.com/it/u=1543542199,1353328726&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
]
</script>

<template>
  <div class="container width">
    <img
      class="image"
      src="https://p0.itc.cn/images01/20230228/c4b6bb46e2d34ced9ca9472b835b38c2.jpeg"
    />
    <img
      class="image"
      src="https://p3.itc.cn/images01/20230228/285eae4b5eda47c1b02b8c11f8b3042f.jpeg"
    />
    <div class="flex list">
      <div class="item" v-for="(item, index) in listList" :key="index">
        <el-image style="width: 99%; height: 100%; margin-right: 3px" :src="item" fit="cover" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  .list {
    height: 600px;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      width: 50%;
      height: 100%;
      margin-bottom: 4px;
    }
  }
}
.image {
  width: 100%;
  object-fit: cover;
}
</style>
